<template>
  <view class="charts-box">
    <qiun-data-charts 
      type="scatter"
      :opts="opts"
      :chartData="chartData"
    />
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 响应式数据
const chartData = ref({});
const opts = ref({
  color: ["#1890FF","#91CB74","#EE6666"],
  padding: [15,15,0,15],
  dataLabel: false,
  enableScroll: false,
  legend: {},
  xAxis: {
    disableGrid: false,
    gridType: "dash",
    splitNumber: 8,
    boundaryGap: "justify",
    min: 0
  },
  yAxis: {
    disableGrid: false,
    gridType: "dash"
  },
  extra: {
    scatter: {}
  }
});

// 生命周期钩子
onMounted(() => {
  getServerData();
});

// 方法
const getServerData = () => {
  setTimeout(() => {
    const res = {
      series: [
        {
          name: "深睡",
          data: [[6,4],[12,4.5],[18,5],[24,5.3]]
        },
        {
          name: "浅睡",
          data: [[1.2,1.5],[1.6,2],[2.5,3.22],[5.3,6],[6.2,6.8],[7.2,7.9],[8,8.21]]
        },
		{
		  name: "清醒",
		  data: [[0.2,1],[8.22,8.88],[9,9.3]]
		}
      ]
    };
    chartData.value = JSON.parse(JSON.stringify(res));
  }, 500);
};
</script>

<style scoped>
.charts-box {
  width: 100%;
  height: 300rpx;
  z-index:-1;
}
</style>